<!DOCTYPE html>
<html lang="zh_CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="mobile-web-app-capable" content="yes" />
    <link rel="stylesheet" type="text/css" href="/public/stylesheets/center.css" />
    <link rel="stylesheet" href="/public/vendor/element/index.css" />
    <script src="/public/vendor/vue@2.7.14.js"></script>
    <script src="/public/vendor/element/index.js"></script>
    <script src="/public/vendor/pdfobject.min.js"></script>

    <script>
      localStorage.removeItem('search_params');
      localStorage.setItem('search_params', new URLSearchParams(location.search).toString());
    </script>
    <title>Document</title>
  </head>

  <body>
    <script>
      let headerList = '<%- JSON.stringify(headerList) %>';
      window.headerList = JSON.parse(headerList);
      const urlParams = new URLSearchParams(location.search);
      console.log('url', urlParams.toString());
      // console.log(headerList);
      //  = headerList;
      // window.frameSrc = 'http://192.168.31.80:4008/template';
    </script>

    <div id="app" class="app">
      <div class="left">
        <!-- <n-data-table class="table" :columns="columns" :data="data" bottom-bordered striped /> -->
        <el-table
          class="table"
          :data="tableData"
          border
          size="mini"
          @row-click="rowClick"
          :row-class-name="tableRowClassName"
        >
          <el-table-column prop="no" label="No." width="50">
            <template slot-scope="scope">
              <div>{{ scope.$index + 1 }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="HEADER_ID" width="70" label="文件ID"> </el-table-column>
          <el-table-column prop="HEADER_NAME" label="模版名称"> </el-table-column>
        </el-table>
      </div>
      <iframe id="docIframe" class="right" frameborder="0" :v-show="docFile" allowfullscreen></iframe>
    </div>

    <script type="module">
      new Vue({
        el: '#app',
        mounted: function () {
          console.log('mounted', window.headerList);
          this.tableData = window.headerList;
        },
        methods: {
          rowClick(rowData) {
            const urlParams = new URLSearchParams(location.search);
            this.currentId = rowData.HEADER_ID || '';
            this.docFile = rowData.HEADER_FILE || `${location.origin}/public/template/empty.docx`;

            urlParams.set('header_id', this.currentId);
            urlParams.set('header_file', this.docFile);
            // debugger
            // urlParams.set('form_ver_id', rowData.HEADER_FILE);

            const iframe = document.getElementById('docIframe');
            docIframe.src = `/template?${urlParams.toString()}`;
          },
          tableRowClassName({ row, rowIndex }) {
            if (this.currentId === row.HEADER_ID) {
              return 'success-row';
            }
            return '';
          },
          //选择模版
          selectTemplate(row) {
            console.log(row);
            const urlParams = new URLSearchParams(location.search);
            urlParams.set('header_id', row.HEADER_ID);
            console.log('url-params', row, urlParams.toString());
            window.location.href = `/editor?${urlParams.toString()}`;
          },
        },
        data: function () {
          return {
            headerList: [],
            tableData: [],
            docFile: null,
            currentId: null,
          };
        },
      });
    </script>
    <script>
      // const iframe = document.getElementById('docIframe');
      // docIframe.src = window.frameSrc;
    </script>
  </body>
</html>
